<template>
	<view class="chatlist" v-if="titleBarHeight>0">

		<view class="header" :style="'height:'+titleBarHeight+'px;padding-top:'+statusBarHeight+'px'">

			<view class="header-title weight">哩咔 </view>
		</view>




		<!-- 邀请进厅弹窗 -->
		<view class="ccc">
			<Invite> </Invite>
		</view>
		<div :style="'margin-top: '+height+'px;'">
			<view v-if="lists">
				<u-tabs-swiper ref="uTabs" :list="lists" :current="current" @change="tabsChange" :is-scroll="false"
					gutter="60" inactive-color="#99999" active-color='#99999' :bar-style="barStyle"></u-tabs-swiper>

			</view>


			<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish"
				@change="handleSwperChange" style=" height:90%;">
				<swiper-item class="swiper-item" v-for="(item, indexs) in tabs" :key="indexs">
					<scroll-view scroll-y style="height:100%; width: 100%;" @scrolltolower="onreachBottom"
						:refresher-threshold="45" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
						:refresher-triggered="triggered" @refresherrestore="onRestore" @refresherabort="onAbort"
						refresher-enabled="true">

						<view class="topbox" v-for="(item,idx) in  list" @click="dianji(idx)" v-if="indexs == 0">
							<image class="touxiang" :src="item.img" mode="widthFix">

							</image>
							<view style="width:20upx;">
							</view>

							<view class="">
								<view class="name">
									{{item.name||'系统消息'}}
								</view>
								<view style="height:10upx;">

								</view>
								<view class="text">
									{{item.text || '收到消息,请打开哩咔APP查看' }}
								</view>
							</view>
							<view class="titme">

								{{getDateDiff(item.time)}}
							</view>
							<view style="height: 100upx;">

								<!-- {{item.unread}} -->
								<view class="yuandian" v-if="item.unread !=0">
								</view>
							</view>
						</view>



						<view class="topbox" v-for="(item,index) in chatlist " @click="dianjij(index)"
							v-if="item.nickName!='哩咔小助手' && indexs !=0 ">
							<image class="touxiang"
								:src="$global.getImageUrl(item.headImg+'?x-oss-process=image/bright,15/resize,m_fill,h_150,w_150', 'https://ourydcimage.shenghua6.cn')"
								mode="widthFix">
								<!-- https://ourydcimage.shenghua6.cn/2021/03/03/2021030319002375927.jpg -->
							</image>
							<view style="width:20upx;">
							</view>
							<view>
								<view class="name">
									<view
										style="  max-width:300upx;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;">
										{{item.nickName}}
									</view>

									<view style="width: 10upx;"></view>
									<p class="sex" v-if="item.nickName!='哩咔小助手'"
										:style="item.sex==1?'background: url('+man+') no-repeat;background-size: contain;':item.sex==2?'background: url('+woman+') no-repeat;background-size: contain;':'background: url('+no+') no-repeat;background-size: contain;'">
										<view style="margin-left:15upx;font-size: 22upx;">
											{{item.age}}
										</view>
									</p>
								</view>

								<view style="height:35upx;display:flex; align-items: center;">
									<img v-if="item.nickName!='哩咔小助手'" class="vipNum" :src="$BASE_URL + '/st/mini/static/img/vip1/vip_' + item.costLevel
+'@2x.png'" />
								</view>
								<view class="text">
									<!-- {{item.text || '收到消息,请打开哩咔APP查看' }} -->
									{{item.descr}}
								</view>
							</view>
							<view class="titme" v-if="item.nickName!='哩咔小助手'">
								<view style="height: 65upx;">

									<image v-if="item.isAttention==2" @click.stop="guanzhu(index,item.userId)"
										style="width:100upx;height: auto;"
										src="https://webapp.test.shenghua6.cn/st/mini/static/img/xcxydy/tuanzhus.png"
										mode="widthFix"></image>
								</view>

								<view style="width: 200upx;text-align:left;">
									{{item.distance !=0 ? item.distance:'全国'}} |
									{{getDateDiff(item.loginTime)}}
								</view>


							</view>
							<!-- 	<view style="height: 100upx;">
								<view class="yuandian">
								</view>
							</view> -->



						</view>

						<view style="height: 100upx;">

						</view>


						<!-- 判断消息是否为空 -->
						<view class="iynst" v-if="list.length==0 && indexs == 0 ">
							<view style="width:50%;text-align: center; ">
								<image style="width: 100%;height: auto;"
									:src="$BASE_URL +'/st/mini/static/img/gender/ques.png'" mode="widthFix">
								</image>
								<view class="texhe">
									怎么能没有消息呢~
								</view>
								<view style="height:10rpx;">
								</view>
								<view>
									快去找人聊聊吧~
								</view>
								<view style="height:120upx;">
								</view>
							</view>
						</view>


						<!-- 判断 粉丝关注好友的 列表是否为空 -->
						<view class="iynst" v-if="chatlist.length ==1 && indexs != 0 ">
							<view style="width:50%;text-align: center; ">
								<image style="width: 100%;height: auto;"
									:src="$BASE_URL +'/st/mini/static/img/gender/ques.png'" mode="widthFix">
								</image>
								<view class="texhe">
									当前暂无{{lists[indexs].name}}
								</view>
								<view style="height:10rpx;">
								</view>
								<view>
									<!-- 快去找人聊聊吧~ -->
								</view>
								<view style="height:120upx;">
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>


		</div>

	</view>
</template>


<!-- 关注 -->
<!-- https://php.zgsj1.com/upload_video/20211104/6d168d61d6545d7d6785c484fe2105e2.png -->



<script>
	// 邀请进厅弹窗
	import Invite from '@/pages/components/Invite/Invite.vue'

	import {

		CreateIM
	} from "@/commons/util.des.js";

	export default {

		components: {
			Invite
		},
		data() {
			return {

				// 主域名
				$BASE_URL: this.$BASE_URL,

				// 通讯录列表数据
				chatlist: [],

				// 防抖
				tapTime: '',

				barStyle: {
					backgroundColor: '#EC808D'
				},
				tabs: [{}, {}, {}, {}],
				lists: [{
					name: '消息',
					type: 0
				}, {
					name: '关注',
					type: 2
				}, {
					name: '粉丝',
					type: 3
				}, {
					name: '好友',
					type: 1
				}],

				// 消息列表
				list: [],

				// 消息列赋值前缓存
				listd: [],

				// 下拉刷新的状态
				triggered: false,
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的

				// 性别
				man: '',
				woman: '',
				no: '',
				mvp: '',


				// 顶部导航高度
				titleBarHeight: '',
				statusBarHeight: '',
				height: 0,

				show: false

			}
		},
		mounted() {

			this.man = this.$BASE_URL + '/st/mini/static/img/sex/man.png'
			this.woman = this.$BASE_URL + '/st/mini/static/img/sex/woman.png'
			this.no = this.$BASE_URL + '/st/mini/static/img/sex/no.png'
			this.mvp = this.$BASE_URL + '/st/mini/static/img/chatRoomDetails/mvp.png'



		},
		onLoad() {

			var _this = this
			_this.current = 0
			// _this.hqlib();
			// 观察者模式 更新会话列表
			uni.$on('update', (e) => {


				_this.hqlib();

				console.log('观察者模式 更新会话列表')





			})

			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					uni.setStorage({
						key: 'getSystemInfo',
						data: res,
						success: function() {
							console.log('success');

							// model设备型号
							// iOS
							// 标题栏高度
							if (res.model == 'iPhone') {
								that.titleBarHeight = 44
							} else {
								that.titleBarHeight = 48
							}
							// 状态栏高度
							that.statusBarHeight = res.statusBarHeight
							that.height = that.titleBarHeight + that.statusBarHeight

						}
					})

				}
			});




			// var res = uni.getStorageSync("getSystemInfo")


			// // model设备型号
			// // iOS
			// // 标题栏高度
			// if (res.model == 'iPhone') {
			// 	this.titleBarHeight = 44
			// } else {
			// 	this.titleBarHeight = 48
			// }
			// // 状态栏高度
			// this.statusBarHeight = res.statusBarHeight
			// this.height = this.titleBarHeight + this.statusBarHeight




			// 数据埋点
			this.shujumaidian();

			// 底部tab页面浏览
			// 底部按钮埋点
			this.dibuannmd();


		},


		onUnload() {
			// 移除监听事件  
			uni.$off('update');


			// 移除监听事件  
			uni.$off('dkjt');
		},

		methods: {


			// 底部tab页面浏览
			// 底部按钮埋点
			dibuannmd: function() {

				// #ifdef  MP-WEIXIN


				// 	$预置属性		
				// is_no_authorization	是否授权	BOOL	
				// $is_first_time	是否首次	BOOL	
				// 	tab名称	STRING	交友tab/房间tab/消息tab/我tab
				getApp().sensors.track('BottomTabView', {
					// 是否首次	BOOL
					$is_first_time: uni.getStorageSync("shifoushouci") == 2 ? 'false' : 'true',
					is_no_authorization: uni.getStorageSync("nei") == "" ? 'false' : 'true',
					tab_name: '消息tab'
				})


				// #endif     

			},




			// 数据埋点
			shujumaidian: function() {


				// 数据埋点
				// 顶部tab页面浏览埋点	$预置属性		
				// 	$is_first_time	是否首次	BOOL	
				// 	is_no_authorization	是否授权	BOOL	
				// 	tab_name	tab名称	STRING	关注聊天室/推荐聊天室/派对聊天室/直播聊天室/交友发现/交友附近的人/消息页消息/消息页关注/消息页粉丝/消息页好友
				// 	current_page	当前页面	STRING	房间/交友/消息

				// #ifdef  MP-WEIXIN


				var tab_name = '消息页' + this.lists[this.current].name
				var current_page = '消息';


				getApp().sensors.track('TopTabPageView', {
					// 是否首次	BOOL
					$is_first_time: uni.getStorageSync("shifoushouci") == 2 ? 'false' : 'true',
					is_no_authorization: uni.getStorageSync("nei") == "" ? 'false' : 'true',
					tab_name: tab_name,
					current_page: current_page,
				})


				// #endif     

			},









			// 点击进入聊天页
			dianjij: function(e) {



				// var res = uni.getStorageSync("userInfo")
				

				//  
				// CreateIM(res.userId, res.imPwd, 0)




				var to = this.chatlist[e].userId
				uni.navigateTo({
					url: '../chatpage/Chatcontent?to=' + to
				})

			},


			dianji: function(e) {
				var _this = this
				var to = this.list[e].to

				uni.navigateTo({
					url: '../chatpage/Chatcontent?to=' + to
				})

			},



			// 点击关注
			guanzhu: function(i, id) {
				console.log('点击关注')
				var _this = this
				var data = {
					url: '/web/v2/api/user/attentionUser',
					methods: 'post',
					data: {
						// userId:this.userId,
						toUserId: id
					}
				}
				this.$http(data).then(res => {
					if (res.data.code == 21000) {
						uni.showToast({
							title: '已关注~',
							icon: 'none'
						})

						_this.chatlist[i].isAttention = 1
					} else { //接口请求失败的处理
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},




			jiexiimg: function(e) {
				var item = JSON.parse(e)
				if (item) {
					// var img =  JSON.parse(item.nickName).headImg
					return this.$global.getImageUrl(item.headImg,
						"https://ourydcimage.shenghua6.cn"
					);
				}



			},




			// 获取 消息列表
			hqlib: function() {


				var _this = this
				_this.list = getApp().globalData.huihua





				console.log('获取聊天消息内存信息', _this.list)


				// return


			},








			// 解析头像地址
			jiexi: function(e) {
				return this.headImg = this.$global.getImageUrl(e,
					"https://ourydcimage.shenghua6.cn"
				);
			},





			// 时间解析
			getDateDiff: function(dateTimeStamp) {
				// console.log('需要解析的时间',dateTimeStamp)


				var minute = 1000 * 60;
				var hour = minute * 60;
				var day = hour * 24;
				var halfamonth = day * 15;
				var month = day * 30;
				var now = new Date().getTime();
				var diffValue = now - dateTimeStamp;
				// console.log('相差时间戳结果',diffValue)


				if (diffValue < 0) {
					var result = "刚刚";
					return result;

				}
				var monthC = diffValue / month;
				var weekC = diffValue / (7 * day);
				var dayC = diffValue / day;
				var hourC = diffValue / hour;
				var minC = diffValue / minute;

				if (monthC >= 1) {
					var result = "" + parseInt(monthC) + "月前";
				} else if (weekC >= 1) {
					var result = "" + parseInt(weekC) + "周前";
				} else if (dayC >= 1) {
					var result = "" + parseInt(dayC) + "天前";
				} else if (hourC >= 1) {
					var result = "" + parseInt(hourC) + "小时前";
				} else if (minC >= 1) {
					var result = "" + parseInt(minC) + "分钟前";
				} else
					var result = "刚刚";
				return result;
			},




			// 查询列表	
			cxchatlist: function() {

				// attentionType = "1" // 好友。3 // 粉丝。2//  关注
				var i = this.current
				var type = this.lists[i].type
				var _this = this


				// var zt = _this.fangdou()


				// if(!zt){
				// 	console.log('不正常')
				// 	return
				// }else{
				// 	console.log('正常')
				// }


				// 等于零的时候
				if (type != 0) {


					var data = {
						url: '/web/v2/api/userExtend/friendListN',
						methods: 'post',
						data: {
							apiVersion: '3.3',
							attentionType: type,
							rowStart: 0,
							rows: 100,

						}
					}
					this.$http(data).then(res => {

						console.log(' 通讯录列表', res)

						// 好友 2  一个官方哩咔助手  一个liu1
						// 粉丝两个一个官方助手
						// 关注 11 一个官方助手
						_this.chatlist = res.data.data.friendList

					})

				} else {
					console.log('获取云信聊天列表')

					_this.hqlib();
				}
			},

			// 下拉刷新
			// 		<!-- 自定义下拉刷新控件被下拉 -->
			onPulling(e) {
				console.log("666666", e);
			},
			// 		<!-- 自定义下拉刷新被触发 -->
			onRefresh() {
				console.log('自定义下拉刷新被触发')

				var _this = this


				var res = _this.fangdou();

				if (res) {

					_this.cxchatlist()
					console.log('执行查询', res)
				}

				_this.triggered = true;
				setTimeout(() => {
					_this.triggered = false;
					console.log('执行关闭')
				}, 1000)
			},
			// 		<!-- 自定义下拉刷新被复位 -->
			onRestore() {

				this.triggered = false; // 需要重置
				console.log("onRestore");
			},
			// 		<!-- 自定义下拉刷新被中止 -->
			onAbort() {
				console.log("onAbort");
			},


			// scroll-view到底部加载更多
			onreachBottom() {

			},



			// 防止恶意点击 防抖
			fangdou: function() {
				var nowTime = Math.round(new Date());
				console.log('距离上次点击', nowTime - this.tapTime, '毫秒')
				if (nowTime - this.tapTime < 600) {
					console.log('阻断')
					this.tapTime = nowTime
					return false;
				} else {
					this.tapTime = nowTime
					return true
					console.log('执行')
				}
			},

			// tabs通知swiper切换
			tabsChange(index) {
				var re = this.fangdou()
				if (!re) {
					console.log('不行')
					return
				}

				this.swiperCurrent = index;
				// this.qiuqid()
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {

				// // console.log(e, 1)

				// let dx = e.detail.dx;
				// // console.log(dx,"dx")
				// // this.$refs.uTabs.setDx(500);

			},



			// tabs通知swiper切换
			tabsChange(index) {
				var re = this.fangdou()
				if (!re) {
					console.log('不行')
					return
				}

				this.swiperCurrent = index;

			},

			handleSwperChange: function(e) {
				console.log(e, 2)
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;

				// 查询列表
				this.cxchatlist()
			},

			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {

			},

		},

		onShow() {

			// this.list = []
			this.hqlib();

			this.show = true

		},
		onHide() {

		},


	}
</script>

<style lang="less" scoped>
	.chatlist>div {
		width: 100%;
		height: 100%;
		color: #000
	}


	.ccc /deep/ .u-mode-center-box {
		background: none;
	}


	.chatlist {
		width: 100%;
		height: 100%;

		overflow: hidden;

		.header {
			display: flex;
			align-items: center;
			top: 0;
			position: fixed;
			width: 100%;
			z-index: 100;
			left: 0;
			background: #FFFFFF;
		}

		.header .header-title {
			position: absolute;
			transform: translateX(-50%);
			left: 50%;
			font-size: 30upx;
		}

		.header-back {
			position: absolute;
			left: 15upx;
			font-size: 30upx;
			padding: 10upx;
			border-radius: 50%;
		}


	}

	.topbox {
		width: 95%;

		margin: 40upx auto;
		display: flex;
		align-items: center;
	}

	.touxiang {
		width: 100upx;
		height: auto;
		border-radius: 50%;


	}

	.titme {
		font-family: PingFangSC-Regular;
		font-size: 24upx;
		color: #9799B2;
		margin-left: auto;
		height: 80upx;
		width: 170upx;
		// border:2upx  solid #FF6034;
		transform: scale(0.8);
		text-align: right;

	}

	.text {
		font-family: PingFangSC-Regular;
		font-size: 24upx;
		color: #9799B2;

		width: 400upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;


	}

	.name {
		font-family: PingFangSC-Regular;
		font-size: 26upx;
		color: #3B3F63;
		letter-spacing: 0;
		text-align: left;
		display: flex;
		align-items: center;



	}

	.yuandian {
		width: 15upx;
		height: 15upx;
		border-radius: 50%;
		background: red;

	}



	.sex {
		width: 66upx;
		height: 28upx;
		line-height: 28upx;
		color: #FFFFFF;
		font-size: 18upx;
		text-align: center;
	}

	.chatlist /deep/ .vipNum {
		display: inline-block;
		width: 50upx;
		height: 24upx;
		background-size: contain;
		background-repeat: no-repeat;
		vertical-align: middle;
		margin-right: 2upx;
	}










	.iynst {
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: PingFangSC-Regular;
		font-size: 31upx;
		color: #9E9E9E;
		margin-top: 180upx;
	}


	.chatlist /deep/.u-tabs-scorll-flex {

		display: block;

	}
</style>
